<template>
	<ItemMusicTop :playlist="playlist"></ItemMusicTop>
	<ItemMusicList :itemlist="itemlist" :subscribedCount="playlist.subscribedCount"></ItemMusicList>
</template>

<script>
	import {
		useRoute
	} from 'vue-router'
	import {
		ref,
		onMounted
	} from 'vue'
	import {
		getMusicList,
		getMusicDetail
	} from '@/api/item.js'
	import ItemMusicTop from '@/components/item/ItemMusicTop.vue'
	import ItemMusicList from '@/components/item/ItemMusicList.vue'

	export default {
		components: {
			ItemMusicTop,
			ItemMusicList
		},

		setup() {
			const route = useRoute()
			const id = route.query.id
			const playlist = ref({})
			const itemlist = ref([])

			onMounted(async () => {
				const {
					data: res
				} = await getMusicList(id)
				playlist.value = res.playlist

				const {
					data: result
				} = await getMusicDetail(id)
				itemlist.value = result.songs
			})

			return {
				playlist,
				itemlist
			}
		}
	}
</script>

<style scoped>

</style>
